<template>
  <div class="good-item" @click="itemClick">
    <img v-lazy="getImage" alt="" @load="imgLoaded">
    <div class="good-info">
      <p class="good-title">{{gooditem.title}}</p>
      <span class="good-price">{{gooditem.price}}</span>
      <span class="good-cfav">{{gooditem.cfav}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'goodItem',
  data() {
    return {
      id: null
    }
  },
  computed:{
    getImage() {// 因为接口有一个有show.image 另一个是image 为了复用组件进行判断
      return this.gooditem.image || this.gooditem.show.img
    }
  },
  props: {
    gooditem: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    imgLoaded() {// 图片加载
      this.$bus.$emit('imgitemLoaded');
      
    },
    itemClick() {// 商品点击
      let id = this.gooditem.iid ? this.gooditem.iid : this.gooditem.shop_id;
      id == this.gooditem.shop_id ? alert('很抱歉！服务器没有给数据！') : this.gooditem.iid;

      this.$router.push('/detail/' + id);// 通过动态加载路由传递iid
      /* this.$router.push({ // 通过query传递路由之间的数据
        path: '/detail',
        query: {
          iid: this.gooditem.iid
        }
      }) */
      
      
    }
  }

}
</script>

<style scoped>
 .good-item{
   width: 48%;
   font-size: 14px;
   text-align: center;
   position: relative;
   
   padding-bottom: 60px;
 }

 .good-item img{
   width: 100%;
   border-radius: 5px;
 }

  .good-info{
    position: absolute;
    bottom: 20px;
    right: 0;
    left: 0;
    width: 100%;
  }

 .good-info p{
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .good-info .good-price{
   color: var(--color-high-text);
  }

  .good-info .good-cfav::before{
    margin-left: 5px;
    content: '';
    padding: 8px;
    background-image: url('../../../assets/img/common/collect.svg');
    background-size: 15px;
    background-position: 1px 7px;
    background-repeat: no-repeat;
    

  }
</style>